<template>
	<!-- #ifdef MP-ALIPAY -->
	<button hover-class='none' scope="userInfo" open-type="getAuthorize" :plain="true" v-if="typeId && productId" :class="[isCollect?'on':'','contact-collect']" @getAuthorize="changeCollect">
		<view class="iconfont">{{isCollect?'&#xe647;':'&#xe646;'}}</view>
		<view class="collect-text">收藏</view>
	</button>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<button hover-class='none' :plain="true" v-if="typeId && productId" :class="[isCollect?'on':'','contact-collect']" @click="changeCollect">
		<view class="iconfont">{{isCollect?'&#xe647;':'&#xe646;'}}</view>
		<view class="collect-text">收藏</view>
	</button>
	<!-- #endif -->
	<!-- #ifdef MP-TOUTIAO || H5 || APP-PLUS -->
	<button hover-class='none' open-type="getUserInfo" :plain="true" v-if="typeId && productId" :class="[isCollect?'on':'','contact-collect']" @click="changeCollect">
		<view class="iconfont">{{isCollect?'&#xe647;':'&#xe646;'}}</view>
		<view class="collect-text">收藏</view>
	</button>
	<!-- #endif -->
</template>

<script>
	import {toPath} from '@/utils/toPath.js'
	export default {
		name: 'stProductCollect',
		props: {
			typeId: {
				type:  [Number,String],				default: ''
			},
			productId: {
				type:  [Number,String],				default: ''
			}
		},
		data() {
			return {
				isCollect: false
			};
		},
		mounted(){
			let hasLogin = this.$store.state.hasLogin;
			if(hasLogin)
			{
				this.checkCollect();
			}
		},
		methods: {
			// 检查是否收藏
			async checkCollect() {
				let params = {
					method: "api/v2/collect/is_collect",
					type_id: this.typeId,
					id: this.productId
				};
			    if (!this.productId){
					return;
				}
				let res = await this.$http(params);
				if (res.status) {
					this.isCollect = res.data.is_collect == 1 ? true : false
				}
			},
			// 变更收藏状态
			async changeCollect() {
				let hasLogin = this.$store.state.hasLogin;
				if(!hasLogin)
				{
					toPath('', this, true);
				}
				else
				{
					let params = {
						method: "api/v2/collect/modify",
						type_id: this.typeId,
						id: this.productId
					};
					let res = await this.$http(params);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.status) {
						this.isCollect = res.data.is_collect == 1 ? true : false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	button{
		line-height: 32px;
	}
	.contact-collect {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 96rpx;
		text-align: center;
		color: #666;
		padding: 0;
		background: #FFFFFF;
		.iconfont {
			font-size: 40rpx;
			height: 38rpx;
			vertical-align: top;
			display: inline-block;
			line-height: 38rpx;
		}
		.collect-text{
			font-size: 20rpx;
			height: 38rpx;
			display: inline-block;
			line-height: 46rpx;
		}
		&.on {
			.iconfont {
				color: #ff4a50;
			}
		}
	}
</style>
